<template>
  <div>
    <Row>
      <Date-picker type="datetime" v-model="startTime" format="yyyy-MM-dd " placeholder="面签开始日期" style="width: 150px"></Date-picker>
      <Date-picker type="datetime" v-model="createDate" format="yyyy-MM-dd" placeholder="面签创建日期" style="width: 150px"></Date-picker>
      <Input v-model="custName" placeholder="客户姓名" style="width: 80px" />
      <Input v-model="clientManager" placeholder="客户经理" style="width: 0px" />
      <Input v-model="custIdcard" placeholder="客户身份证号码" style="width: 160px" />

      <i-select :model.sync="model1" v-model="faceSigStatusList.faceSigStatus" size="large" placeholder="面签状态" style="width:150px">
        <i-option v-for="item in faceSigStatusList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
      </i-select>

      <i-select :model.sync="model2" size="large" v-model="nodeList.processStatus" placeholder="流程状态" style="width:150px">
        <i-option v-for="item in nodeList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
      </i-select>

      <i-select :model.sync="model3" size="large" v-model="channelTypeList.channelTypeList" placeholder="渠道" style="width:150px">
        <i-option v-for="item in channelTypeList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
      </i-select>

      <i-select :model.sync="model4" size="large" v-model="faceJobIdList.faceJobId" placeholder="面签员" style="width:150px">
        <i-option v-for="item in faceJobIdList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
      </i-select>
      <div style="position: relative;left:50%; top:50%;margin:5px;">
        <i-button type="primary" @click="searchPage()" icon="ios-search">搜索</i-button>
        <i-button type="warning" @click="cleanCondition">重置</i-button>
      </div>
    </Row>
    <Row class="margin-top-10 searchable-table-con1">
      <Table :columns="columns1" :data="dataPage"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="dataTotal" :current="pageNo" :page-size="pageSize" @on-change="handlePageChange"></Page>
        </div>
      </div>
    </Row>
  </div>
</template>

<script>

export default {
  data () {
    return {
      baseUrl: this.$appContext.marvels_core_approve,
      $ajax: null,
      columns1: [
        {
          title: '序号',
          type: 'index',
          width: 80,
          align: 'center'
        },
        {
          align: 'center',
          title: '客户姓名',
          key: 'custName',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('a', {
                style: {
                  // textDecoration: 'underline',
                  decoration: 'none'
                },
                on: {
                  click: function () {
                    vm.$router.push({
                      path: '/customer-service/spmq/videofacesigWorkpage',
                      query: {
                        loanId: params.row.loanId,
                        type: '10' // 只是查看
                      }
                    })
                  }
                }
              }, params.row.custName)
            ])
          }
        },
        {
          align: 'center',
          title: '身份证号码',
          key: 'custIdcard'
        },
        {
          align: 'center',
          title: '渠道',
          key: 'channelType',
          render: (h, params) => {
            const vm = this
            return h('div', {
              domProps: {
                innerHTML: vm.renderColumnContext(params)
              }
            }, params.content)
          }
        },
        {
          align: 'center',
          title: '客户经理',
          key: 'clientManager'
        },
        {
          align: 'center',
          title: '面签开始日期',
          key: 'startTime',
          // sortable:'custom',
          // sortType:'desc',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatTime(params.row.appointmentDate))
            ])
          }
        },
        {
          align: 'center',
          title: '面签创建日期',
          key: 'createDate',
          // sortable:'custom',
          // sortType:'desc',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.formatTime(params.row.createDate))
            ])
          }
        },
        {
          align: 'center',
          title: '状态',
          key: 'faceSigStatus',
          render: (h, params) => {
            const vm = this
            return h('div', {
              domProps: {
                innerHTML: vm.renderColumnContext(params)
              }
            }, params.content)
          }
        },
        {
          align: 'center',
          title: '是否取消',
          key: 'cancel',
          render: (h, params) => {
            const vm = this
            return h('div', {
              domProps: {
                innerHTML: vm.renderColumnContext(params)
              }
            }, params.content)
          }
        },
        {
          align: 'center',
          title: '面签员',
          key: 'faceJobId'
        }
      ],
      startTime: null,
      createDate: null,
      custName: '',
      custIdcard: '',
      clientManager: '',
      processStatus: '',
      faceSigStatus: '',
      // sortType:'desc',
      // sortBy:'startTime',
      dataPage: [],
      dataTotal: 0,
      pageTotal: 1,
      pageNo: 1,
      pageSize: 20,
      toggleAddMenus: false,
      menuTree: [], // 整个菜单树
      selectList: [], // 页面双向绑定渲染，当前角色选中的菜单
      choosedRow: null,
      // 渠道下拉
      channelTypeList: [],
      // channelTypeList: [
      //             {
      //                 value: '',
      //                 label: '请选择'
      //             },
      //             {
      //                 value: '101',
      //                 label: '保险渠道'
      //             },
      //             {
      //                 value: '102',
      //                 label: '银行渠道'
      //             },

      //         ],
      model3: '',
      faceJobIdList: [
        {
          value: '',
          label: ''
        }],
      model4: '',
      faceSigStatusList: [
        // 0.面谈中、1.面签中、2.面谈退回、3.已取消、4.已过号)
        {
          value: '',
          label: '请选择'
        },
        {
          value: '0',
          label: '面谈中'
        },
        {
          value: '1',
          label: '正在面签'
        },
        {
          value: '2',
          label: '已面签'
        },
        {
          value: '3',
          label: '已过号'
        },
        {
          value: '4',
          label: '面谈通过'
        },
        {
          value: '5',
          label: '面谈退回'
        },
        {
          value: '6',
          label: '面谈否决'
        },
        {
          value: '7',
          label: '待面签'
        },
        {
          value: '8',
          label: '面签退回'
        },
        {
          value: '9',
          label: '面谈通过'
        }
      ],
      model1: '',
      nodeList: [
        // processStatus 流程状态 : 0.面谈退回、1.面谈通过、2.面谈拒绝、3.面签通过、4.面签拒绝
        {
          value: '',
          label: '请选择'
        }// },
        // {
        //     value: '0',
        //     label: '面谈退回'
        // },
        // {
        //     value: '1',
        //     label: '面谈通过'
        // },
        // {
        //     value: '2',
        //     label: '面谈拒绝'
        // },
        // {
        //     value: '3',
        //     label: '面签通过'
        // },
        // {
        //     value:'4',
        //     lable: '面签拒绝'
        // }
      ],
      model2: '',
      faceJobIdlist: [
        {
          value: '',
          label: '请选择'
        }
      ]
    }
  },
  methods: {
    // 表格单元格渲染布尔值
    renderColumnContext: function (rowContext) {
      // 面签状态：面谈中、面签中、面谈退回、已取消、已过号；
      // 流程状态：面谈退回、面谈通过、面谈拒绝、面签通过、面签否决；
      if (rowContext.column.key === 'faceSigStatus') {
        var status = rowContext.row.faceSigStatus
        if (status === 0) {
          return '未面签'
        } else if (status === 1) {
          return '正在面签'
        } else if (status === 2) {
          return '已面签'
        } else if (status === 3) {
          return '已过号'
        } else if (status === 4) {
          return '面谈通过'
        } else if (status === 5) {
          return '面谈退回'
        } else if (status === 6) {
          return '面谈否决'
        } else if (status === 7) {
          return '待面签'
        } else if (status === 8) {
          return '面签退回'
        } else if (status === 9) {
          return '面签拒绝'
        }
      } else if (rowContext.column.key === 'cancel') {
        return rowContext.row.cancel === 1 ? '未取消' : '取消'
      } else if (rowContext.column.key === 'channelType') {
        return rowContext.row.channelType === 101 ? '保险渠道' : '银行渠道'
      } else if (rowContext.row.custName === 'custName') {
        // return '<span style="color:#57a3f3"><a>123213</a></span>';
      }
    },
    // 分页查询
    searchPage (initParam) {
      if (initParam === null) {
        this.startTime = this.startTime
      } else {
        var da = new Date()
        this.startTime = da
      }
      var params = {
        'pageNo': this.pageNo,
        'pageSize': this.pageSize,
        'startTime': this.startTime,
        'createDate': this.createDate,
        'custName': this.custName,
        'custIdcard': this.custIdcard,
        'clientManager': this.clientManager,
        'faceJobId': this.faceJobIdList.faceJobId,
        'channelType': this.channelTypeList.channelTypeList,
        'faceSigStatus': this.faceSigStatusList.faceSigStatus,
        'processStatus': this.nodeList.processStatus
      }
      var url = this.baseUrl + 'approve/spmq/service/faceSigPageList/' + params.pageNo + '/' + params.pageSize
      this.$ajax.post(url, params).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        this.dataPage = data.data.list
        this.dataTotal = data.data.total
        this.pageTotal = data.data.pages
        this.pageNo = data.data.pageNum
      }).catch(er => {

      })
      url = this.baseUrl + 'approve/spmq/service/getUserList'
      this.$ajax.get(url).then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }

        // 面签员下拉框
        var faceJobIdlist = data.data.list
        for (var i = 0; i < faceJobIdlist.length; i++) {
          this.faceJobIdList.push({
            value: faceJobIdlist[i].faceJobId,
            label: faceJobIdlist[i].faceJobId
          })
        }
      }).catch(er => {

      })
    },
    getCaseNode () {
      // //获取流程
      this.$ajax.get(this.baseUrl + '/approve/mqcspz/service/getCaseNode').then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        // 流程下拉框
        var nodeList = data.data
        for (var i = 0; i < nodeList.length; i++) {
          this.nodeList.push({
            value: nodeList[i].node_code,
            label: nodeList[i].node_name
          })
        }
      }).catch(er => {

      })
    },
    searchChannel () {
      this.$ajax.get(this.$appContext.marvels_core_product + 'product/mcpt/service/searchChannel').then(re => {
        var data = re.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        // 渠道下拉框
        var channelTypeList = data.data
        for (var i = 0; i < channelTypeList.length; i++) {
          this.channelTypeList.push({
            value: channelTypeList[i].channelCode,
            label: channelTypeList[i].channelName
          })
        }
      }).catch(er => {

      })
    },
    // 翻页
    handlePageChange (index) {
      this.pageNo = index
      this.searchPage()
    },
    // 清空查询条件
    cleanCondition: function () {
      this.startTime = null
      this.endTime = null
      this.custName = null
      this.custIdcard = null
      this.clientManager = null
      this.faceJobId = null
    }
  },
  mounted () {
    this.$ajax = this.$util.ajax()
    this.searchPage()
    this.searchChannel()
    this.getCaseNode()
  },
  created: function () {

  },
  components: {

  }
}
</script>
